<template>
  <div class="box">
    <tinymce v-model="content" :height="300" />
    <!-- eslint-disable vue/no-v-html -->
    <div class="mt-20" v-html="content" />
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'

export default {
  name: 'TinymceDemo',
  components: { Tinymce },
  data() {
    return {
      content:
      `<h1 style="text-align: center;">欢迎使用 Tinymce 案例!</h1>
      <p style="text-align: center; font-size: 15px;">
        <img title="TinyMCE Logo" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" alt="TinyMCE Logo" width="110" height="97" />
        <ul>
          <li>我们 <a href="//www.tinymce.com/docs/" target="_blank">文档</a> 是学习如何配置TinyMCE的绝佳资源。</li>
          <li>有具体问题吗？访问 <a href="https://community.tinymce.com/forum/" target="_blank">社区论坛</a>。</li>
          <li>我们还提供企业级支持，作为 <a href="https://tinymce.com/pricing" target="_blank">TinyMCE高级订阅</a>。</li>
        </ul>`
    }
  }
}
</script>

<style scoped>
</style>

